
<template>
  <div class="home">
   <top-header title="下厨房" v-show="showTip == true"></top-header>
   <div class="title">
     <h1>下<span>厨</span><span>房</span></h1>
   </div>
   <div class="search" @click="$router.push({name:'Class'})">
     <h1><i class="iconfont">&#xe609;</i> 今天想吃什么？</h1>
    </div>
    <div class="jianyan">
      <p>对美食与爱的一再坚持</p>
    </div>
    <div class="foods">
      <ul class="food"><li v-for="(item, index) in share" :key="index">
      <img :src="item.img" alt="">
      <p>{{item.contents}}</p>
      <div class="user_title">
        <div style="margin-left:10px">
        <p class="nichen" style="color:black">{{item.nickname}}</p>
        <p style="font-size:12px">{{item.time}}</p>
          </div>
          <img :src="item.icon2" alt="" class="icon"> 
      </div>
      </li>
      </ul>
    </div>
  </div>
</template>

<script>

import TopHeader from '../components/TopHeader.vue'

export default {
  name: 'Home',
  components: {
    TopHeader
  },
  data() {
    return {
      share:'',
      showTip:'',
      img:''
    }
  },
  methods: {
       getImage(url) {
      // console.log(url);
      if (url !== undefined) {
        return url.replace(
          /^(http)[s]*(\:\/\/)/,
          "https://images.weserv.nl/?url="
        );
      }
    },
    getshare(){
      this.$ajax.get('http://localhost/mysql/shareselect.php')
      .then((res)=>{
        console.log(res.data)
          this.share = res.data
       
         
      })
      },
      handleScroll() {
      let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop; //滚动高度
      // let boxHeight = 0;
      // boxHeight = this.$refs.memberHeader.clientHeight + this.$refs.memberContent.clientHeight; //盒子高度
      if ( scrollHeight > 180) {
        this.showTip = true;
      } else {
        this.showTip = false;
      }
    },
  },
 mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll); // 监听（绑定）滚轮滚动事件
    });
 },
   created() {
    this.getshare();
  },
}

</script>

<style lang="scss">
  .title{
    margin-top: 50px;
    padding:20px 20px;
    font-size: 30px;
   font-weight:bold;
    h1{
    display: flex;
    justify-content: center;
     color: rgba(0, 0, 255, 0.671);
     span:first-child{
       color: red;
     }
     span:last-child{
       color: brown;
     }
   }
  }
  .search{
    width: 300px;
    height: 50px;
    background-color: rgb(199, 193, 193);
    margin: 0 auto;
    border-radius: 5px;
   h1{
     font-size: 20px;
     line-height: 50px;
     text-align: center;
     i{
       font-size: 22px;
       
     }
   }
  }
  .jianyan{
    margin: 15px auto;
    p{
      text-align: center;
      color:rgb(221, 217, 217);
    }
  }

 .foods{
        margin:15px 10px 55px;
        
         width: 375.2px;
        //  margin-bottom: 55px;
        .user_title{
          display: flex;
          flex-direction: row-reverse;
          margin-right: 10px;
          .icon{
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .nichen{
            margin-bottom: 0;
            display: flex;
            align-items: center;
          }
          
        }
    .food {
      
      padding: 0 2px;
      display: flex;
      flex-direction: row;
      // justify-content: space-around;

      flex-wrap: wrap;
      li {
        width: 170px;
       margin-left: 10px;
        list-style-type :none;
        img{
           width: 100%;
          height: 230px;
        }
        p{
    color: black;
    font-size: 15px;
}
      }
    }
    }
</style>